<template>
  <div>
    <basic-container>
      <el-form ref="formSearch"
               :model="formSearch"
               label-width="100px"
               size="small"
               :inline="true">
        <el-form-item>
          <el-button type="primary"
                     size="small"
                     @click.stop="handleAdd()">添加</el-button>
          <el-button type="primary"
                     size="small" plain
                     @click.stop="typeMode()">供应商类型管理</el-button>
        </el-form-item>
        <el-form-item label="供应商类型：">
          <el-select v-model="formSearch.type"
                     placeholder="请选择">
            <el-option label="全部"
                       :value="-1"></el-option>
            <el-option v-for='v in supplierType'
                       :key='v.id'
                       :label="v.name"
                       :value="v.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="formSearch.name"
                    placeholder="请输入供应商名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="searchFormSubmit()">搜索</el-button>
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <avue-crud :option="tableOption"
                 :data="tableData"
                 :table-loading="tableLoading"
                 :page="page"
                 ref="crud"
                 @size-change='sizeChange'
                 @current-change='currentPage'>
        <template slot-scope="scope"
                  slot="status">
          {{scope.row.status===1?'已禁用':'已启用'}}
        </template>
        <template slot-scope="scope"
                  slot="editTime">
          {{scope.row.name}}<span>-</span>{{scope.row.state}}
        </template>
        <template slot-scope="scope"
                  slot="menu">
          <el-button type="primary"
                     size="small"
                     plain
                     @click.stop="handleEdit(scope.row,scope.index)">修改</el-button>
          <el-button type="primary"
                     size="small"
                     plain
                     @click.stop="handleDelete(scope.row,scope.index)">删除</el-button>
        </template>
      </avue-crud>
    </basic-container>

    <!-- 添加/修改类型 -->
    <el-dialog title="类型管理" :visible.sync="typeDialogFormVisible" width="40%">
      <avue-crud :option="tpyeTableOption" :data="tpyeTableData" :table-loading="tpyeTableLoading" :page="tpyeTablepage"
                 ref="crud" @size-change='tpyeSizeChange' @current-change='typeCurrentPage'>
        <template slot-scope="scope" slot="menuLeft">
          <el-button type="primary" size="small" plain @click.stop="addTypeMode()">添加</el-button>
        </template>
        <template slot-scope="scope" slot="menu">
          <el-button type="primary" size="small" plain @click.stop="updTypeMode(scope.row)">修改</el-button>
          <el-button type="primary" size="small" plain @click.stop="delTypeMode(scope.row)">删除</el-button>
        </template>
      </avue-crud>
    </el-dialog>


    <!-- 添加/修改类型 -->
    <el-dialog title="类型管理" :visible.sync="addTypeDialogFormVisible" width="40%">
      <el-form ref="addTypeRef" :model="addTypeForm" :rules="addRules" label-position="left" label-width="150px">
        <el-form-item label="供应商类型名称：" prop='name'>
          <el-input v-model="addTypeForm.name" placeholder=""></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button @click="addTypeDialogFormVisible = false">关 闭</el-button>
        <el-button type="primary"  @click="addTypeFormSubmit()">确 认</el-button>
      </div>
    </el-dialog>

    <!-- 添加/修改 -->
    <el-dialog :title="dialogTitle"
               :visible.sync="dialogFormVisible"
               width="40%"
               class="diading">
      <el-form ref="dialogForm"
               :model="dialogForm"
               :rules="rules"
               label-position="left"
               label-width="110px">
        <el-form-item label="供应商类型："
                      prop='type'>
          <el-select v-model="dialogForm.type"
                     placeholder="请选择"
                     style="width:100%">
            <el-option v-for='v in supplierType'
                       :key='v.id'
                       :label="v.name"
                       :value="v.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="供应商名称："
                      prop='name'>
          <el-input v-model="dialogForm.name"
                    placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="联系人："
                      prop='contactName'>
          <el-input v-model="dialogForm.contactName"
                    placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="联系方式："
                      prop='contactPhone'>
          <el-input v-model="dialogForm.contactPhone"
                    placeholder=""></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer"
           style="text-align:center">
        <el-button @click="dialogFormVisible = false">关 闭</el-button>
        <el-button type="primary"
                   @click="handleAddLine('dialogForm')">确 认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listOption, tpyeTableOption } from "@/const-personal/sysSetup/supplierManage.js"
import { checkPhone ,validatenull} from "@/util/validate.js"
import {
  getSupplierList,
  deleteSupplier,
  addSupplier,
  updateSupplier,
  getSupplierType,
  getSupplierTypeList,
  updateSupplierType,
  addSupplierType,
  deleteSupplierType,
} from "@/api/sysSetup/supplierManage";
export default {
  name: "supplierManage",
  data () {
    return {
      addTypeForm:{ },
      tpyeTableOption:tpyeTableOption,
      typeDialogFormVisible:false,
      tpyeTableData:[],
      tpyeTableLoading:false,
      tpyeTablepage: {
          total: 10, //总页数
          currentPage: 1, //当前页数
          pageSize: 5, //每页显示多少条
          pageSizes: [5, 10, 20]
      },
      formSearch: {
        name: "",
        type: -1,
      },
      tableOption: listOption,
      page: {
        total: 10, //总页数
        currentPage: 1, //当前页数
        pageSize: 10, //每页显示多少条
        pageSizes: [5, 10, 20]
      },
      tableLoading: false,
      tableData: [],//数据
      // 新增修改
      dialogTitle: '添加供应商',
      dialogFormVisible: false,
      rules: {
        name: [{ required: true, message: '请输入库房名称', trigger: 'blur' }],
        contactName: [{ required: true, message: '请输入联系人名字', trigger: 'blur' }],
        type: [{ required: true, message: '请选择仓库类型', trigger: 'change' }],
        contactPhone: [{ required: true, validator: checkPhone, trigger: 'change' }],
      },
      addRules:{
          name: [{ required: true, message: '请输入类型名称', trigger: 'blur' }],
      },
      dialogForm: {},
      supplierType: [
      ],
      is_update: false,
      updateId: null,
      supplierTypeId: null,
      addTypeDialogFormVisible:false
    }
  },
  created(){
    // this.getTypeData()
  },
  mounted () {
    this._getWarehouseList()
    this._getSupplierType()
  },
  methods: {
      // 删除
      delTypeMode (row) {
          this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
              confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
          }).then(() => {
              //请求--删除
              deleteSupplierType({ id: row.id }).then(res => {
                  if (res.data.code === 200) {
                      this.$notify({ title: '操作成功', type: 'success', message: '删除成功!' });
                      this.getTypeData()
                  } else {
                      this.$notify.error({ title: '操作失败', message: res.data.message, type: 'danger', });
                  }
              })
          });
      },
      addTypeFormSubmit(){
          this.$refs.addTypeRef.validate((valid)=>{
              if(valid){
                  if(validatenull(this.addTypeForm.id)){
                      addSupplierType(this.addTypeForm).then(res=>{
                          if (res.data.code === 200) {
                              this.$notify({ title: '操作成功', type: 'success', message: '添加成功!' });
                              this.addTypeDialogFormVisible=false
                              this.getTypeData()
                          } else {
                              this.$notify.error({ title: '操作失败', message: res.data.message, type: 'danger', });
                          }
                      })
                  } else {
                      updateSupplierType(this.addTypeForm).then(res=>{
                          if (res.data.code === 200) {
                              this.$notify({ title: '操作成功', type: 'success', message: '修改成功!' });
                              this.addTypeDialogFormVisible=false
                              this.getTypeData()
                          } else {
                              this.$notify.error({ title: '操作失败', message: res.data.message, type: 'danger', });
                          }
                      })
                  }
              }
          })
      },
      //添加类型
      addTypeMode(){
          this.addTypeDialogFormVisible = true;
          this.addTypeForm={}
      },
      //修改类型
      updTypeMode(row){
          this.addTypeDialogFormVisible = true;
          this.addTypeForm ={
              id: row.id,
              name: row.name
          }
      },
      typeMode(){
          this.getTypeData();
      },
    //供应商分页查询
    _getWarehouseList (search) {
      let parmas = {
        page: this.page.currentPage,
        size: this.page.pageSize
      };
      if (search) {
        parmas['supplierTypeId'] = search.type == -1 ? null : search.type;
        parmas['name'] = search.name
        parmas['page'] = 1
      }
      getSupplierList(parmas).then(res => {
        if (res.data.code === 200) {
          this.tableData = res.data.data.list
          this.page.total = res.data.data.total;
          this.page.pageSize = res.data.data.pageSize
          this.page.currentPage = res.data.data.pageNum
        }
      })
    },
    //供应商类型
    _getSupplierType () {
      getSupplierType().then(res => {
        if (res.data.code === 200) {
          this.supplierType = res.data.data
            this._getWarehouseList()
        }
      })
    },
    // 搜索
    searchFormSubmit () {
      this._getWarehouseList(this.formSearch)
    },
    // 重置
    handleReset () { },
    // 切换页面
    currentPage (val) {
      this.page.currentPage = val
      this._getWarehouseList()
    },
    sizeChange (val) {
      this.page.pageSize = val
      this._getWarehouseList()
    },
    typeCurrentPage (val) {
      this.tpyeTablepage.currentPage = val
      this.getTypeData()
    },
    tpyeSizeChange (val) {
      this.tpyeTablepage.pageSize = val
      this.getTypeData()
    },
    getTypeData(){
        this.typeDialogFormVisible = true
        let data = {
            page: this.tpyeTablepage.currentPage,
            size: this.tpyeTablepage.pageSize,
        }
        getSupplierTypeList(data).then(res => {
            if (res.data.code === 200) {
                this.tpyeTableData = res.data.data.list
                this.tpyeTablepage.total = res.data.data.total;
                this.tpyeTablepage.currentPage = res.data.data.pageNum;
                this.tpyeTablepage.pageSize = res.data.data.pageSize;
                this._getSupplierType()
            } else {
                this.$notify.error({ title: '查询失败', message: res.data.message, type: 'danger', });
            }
        })
    },
    // 新增
    handleAdd () {
      this.dialogFormVisible = true;
      this.dialogTitle = '添加供应商';
      this.is_update = false
      this._getSupplierType()
      this.dialogForm = {
        name: '',
        contactName: '',
        type: '',
        contactPhone: ''
      }
    },
    // 修改
    handleEdit (row, index) {
      this.dialogFormVisible = true;
      this.dialogTitle = '修改供应商';
      this.is_update = true
      let res = this.tableData.find(item => item.id == row.id)
      console.log(res);
      this.updateId = row.id
      this.supplierTypeId = res.supplierTypeId
      this.dialogForm = {
        name: res.name,
        contactName: res.contactsName,
        type: res.supplierTypeId,
        contactPhone: res.phone
      }
    },
    // 删除
    handleDelete (row, index) {
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
      }).then(() => {
        //请求--删除
        deleteSupplier({ id: row.id }).then(res => {
          if (res.data.code === 200) {
            this._getWarehouseList()
              this.$notify({ title: '操作成功', type: 'success', message: '删除成功!' });
          } else {
              this.$notify.error({ title: '操作失败', message: res.data.message, type: 'danger', });
          }
        })
        // this.$delete(this.gridData, index)

      });
    },
    // 确认新增/修改
    handleAddLine (formName) {

      this.$refs[formName].validate((valid) => {
        if (valid) {
          let parmas = {
            phone: this.dialogForm.contactPhone,
            name: this.dialogForm.name, //仓库名称
            supplierTypeId: typeof this.dialogForm.type === 'number' ? this.dialogForm.type : this.supplierTypeId,
            contactsName: this.dialogForm.contactName
          }
          if (this.is_update) {
            //修改
            parmas['id'] = this.updateId
            updateSupplier(parmas).then(res => {
              if (res.data.code === 200) {
                this._getWarehouseList()
                this.$refs[formName].resetFields();
                this.$notify({ title: '操作成功', type: 'success', message: '修改成功!' });
                this.dialogFormVisible = false
              } else {
                  this.$notify.error({ title: '操作失败', message: res.data.message, type: 'danger', });
              }
            })
          } else {//新增
            addSupplier(parmas).then(res => {
              if (res.data.code === 200) {
                this._getWarehouseList()
                this.$refs[formName].resetFields();
                this.$notify({ title: '操作成功', type: 'success', message: '添加成功!' });
                this.dialogFormVisible = false
              } else {
                  this.$notify.error({ title: '操作失败', message: res.data.message, type: 'danger', });
              }
            })
          }
        }
      })
    }
  }
};
</script>

<style scoped>
</style>